<template>
	<view>
		<dz-mask :show="show || !isConnected" :custom-style="maskStyle" duration="0" :z-index="zIndex" :maskClickAble="false">
			<view class="warp dz-flex">
				<block v-if="isConnected">
					<view class="content" v-if="status == 'loading'">
						<dz-page-loading-style :mode="styleLoadingType" :color="theme.dzBaseColor" size="70"></dz-page-loading-style>
						<view v-if="styleLoadingType != 'flower' && styleLoadingType != 'loading-3'" class="tip dz-m-t-20 dz-tips-color">{{
							loadingText || '正在加载中...'
						}}</view>
					</view>
					<view class="content" v-if="status == 'loadingImg'">
						<image :style="[loadingStyle]" :src="loadingImage" mode="widthFix"></image>
						<view class="tip dz-tips-color">{{ loadingText }}</view>
					</view>
					<view class="content" v-if="status == 'error'" @click="errorTab">
						<dz-image :src="errorImage" width="360" height="360"></dz-image>
						<view class="tip dz-tips-color">{{ errorText }}</view>
						<view v-if="showBack" class="back" @click="backClick">返回</view>
					</view>
					<view class="content" v-if="status == 'invalid'">
						<dz-image :src="invalidImage" width="360" height="360"></dz-image>
						<view class="tip dz-tips-color">{{ errorText }}</view>
						<view class="back" @click="backClick">返回</view>
					</view>
				</block>
				<block v-else>
					<view class="content">
						<dz-image :src="errorImage" width="360" height="360"></dz-image>
						<view class="tip dz-tips-color">嗷嗷！网络信号已丢失</view>
					</view>
				</block>
			</view>
		</dz-mask>
	</view>
</template>

<script lang="ts" setup>
import { ref, onMounted, computed } from 'vue';
import type { CSSProperties } from 'vue';
import { useUserStore } from '@/state/modules/user';
import assetsConfig from '@/core/config/assetsConfig';

const props = defineProps({
	// 是否显示
	show: {
		type: Boolean,
		default: false,
	},
	// 用户自定义样式
	customStyle: {
		type: Object,
		default() {
			return {};
		},
	},
	//加载状态，loading,error
	status: {
		type: String,
		default: 'loading',
	},
	//加载中图片
	loadingImage: {
		type: String,
		default:
			'',
	},
	//加载中文字
	loadingText: {
		type: String,
		default: '',
	},
	//加载中样式
	loadingStyle: {
		type: Object,
		default() {
			return {
				width: '60rpx',
				height: '60rpx',
			};
		},
	},
	//加载错误图片
	errorImage: {
		type: String,
		default:
			'',
	},
	//加载错误文字
	errorText: {
		type: String,
		default: '加载失败，点击重试',
	},
	//错误样式
	errorStyle: {
		type: Object,
		default() {
			return {
				width: '360rpx',
				height: '360rpx',
			};
		},
	},
	invalidImage: {
		type: String,
		default: assetsConfig.emptyInvalid,
	},
	showBack: {
		type: Boolean,
		default: false,
	},
	// 层级z-index，自定义tabbar为998，navbar为980，为了不覆盖到自定义tabbar，这里默认为979
	zIndex: {
		type: [Number, String],
		default: 979,
	},
});

const emits = defineEmits(['click', 'back']);
const userStore = useUserStore();
const isConnected = ref(true);
const styleLoadingType = computed(() => {
	return userStore.getStyleLoadingType;
});

const theme = computed(() => {
	return userStore.getTheme;
});

const maskStyle = computed((): CSSProperties => {
	let style = {};
	style.backgroundColor = '#fff';
	style = { ...style, ...props.customStyle };
	return style;
});

onMounted(() => {
	uni.getNetworkType({
		success: function (res) {
			if (res.networkType == 'none') {
				isConnected.value = false;
			} else {
				isConnected.value = true;
			}
		},
	});
});

function errorTab() {
	isConnected.value = true;
	emits('click');
}
function backClick() {
	emits('back');
}
</script>

<style scoped lang="scss">
.warp {
	align-items: center;
	justify-content: center;
	height: 100%;
}
.content {
	text-align: center;
}

.tip {
	padding: 10rpx 20rpx;
	font-size: 22rpx;
	text-align: center;
}
.back {
	padding: 10rpx 20rpx;
	font-size: 22rpx;
	text-align: center;
	color: #2979ff;
}
</style>
